<script setup lang="ts">
import {reactive, ref, watch, defineProps} from "vue";
import {TextareaMaterialType} from "@/data-type/material.type";
const defaultProps = {
  type: 'textarea',
  props: {
    label: '多行文本',
    text: '多行输入框',
    placeholder: '请输入内容',
    type: 'default'
  }
}
const value = ref<string>('');
const props = defineProps<{material:TextareaMaterialType}>();
let formState = reactive<TextareaMaterialType>(props.material);
formState.props = Object.assign(defaultProps.props, formState.props?formState.props:{});
watch(props, (newValue, oldValue)=>{
  formState = newValue.material;
});
</script>

<template>
  <div class="zhtt-material-input">
    <a-form-item :label="formState.props.label">
      <a-textarea :rows="4"
                  v-model:value="formState.props.text"
          :placeholder="formState.props.placeholder"
          :size="formState.props.size"
      />
    </a-form-item>
  </div>
</template>

<style scoped>

</style>
